<template>
	<view class="avactor"></view>
	<view style="text-align: center;font-weight: 300;font-size: 15px;">
		社区医疗
	</view>

	<view class="content">
		<view class="title">登录</view>
		<input type="number" placeholder="请输入登录手机号" class="input" v-model="phone" />
		<view class="borbottom"></view>
		<input type="password" placeholder="请输入密码" class="input" v-model="password" />
		<view class="borbottom"></view>
		<view class="login" @click="handleLogin">
			登录
		</view>

		<view class="bottom">
			<text style="font-size: 14px;margin-right: 30rpx;">没有账户?</text>
			<text style="color: rgb(1, 190, 98);font-size: 14px;" @click="toRegister">立即注册</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import md5 from 'js-md5';


// 表单数据
const phone = ref('')
const password = ref('')
// 处理登录
const handleLogin = async () => {
	// 先统一隐藏所有可能的loading（安全措施）
	uni.hideLoading()


	// 显示新的loading
	uni.showLoading({
		title: '登录中...',
		mask: true
	})

	try {
		// 表单验证（现在会触发hideLoading）
		if (!phone.value || !password.value) {
			throw new Error('手机号和密码不能为空')
		}
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			throw new Error('请输入正确的手机号')
		}
		if (password.value.length < 6) {
			throw new Error('密码长度不能少于6位')
		}
		// 彻底重构请求部分
		const requestTask = uni.request({
			url: "http://localhost:3010/user/login",
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: `phone=${phone.value}&pwdmd5=${md5(password.value)}`,
			success: (res) => {
				if (res.statusCode !== 200) {
					throw new Error(`HTTP错误: ${res.statusCode}`)
				}
				if (res.data.code !== 200) {
					throw new Error(res.data.msg || '登录失败')
				}

				uni.setStorageSync('token', res.data.data.token)
				uni.showToast({ title: '登录成功', icon: 'success' })
				setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 1500)
			},
			fail: (err) => {
				throw new Error(err.errMsg || '网络请求失败')
			},
			complete: () => {
				uni.hideLoading() // 确保无论如何都会执行
			}
		})

	} catch (error) {
		uni.showToast({
			title: error.message.includes('Network')
				? '网络连接失败'
				: error.message,
			icon: 'none'
		})
		uni.hideLoading() // 额外保险
	}
}

// 跳转去注册页面
const toRegister = () => {
	uni.redirectTo({
		url: '/pages/register/register'
	})
}

</script>

<style>
.avactor {
	width: 190rpx;
	height: 190rpx;
	background-color: rgb(131, 255, 195);
	border-radius: 30rpx;
	margin: 0 auto;
	margin-top: 100rpx;
	margin-bottom: 30rpx;
}

.content {
	padding: 0 70rpx;
	margin-top: 200rpx;
}

.title {
	font-weight: bolder;
	font-size: 25px;
}

.input {
	margin-top: 80rpx;
}

.borbottom {
	width: 100%;
	height: 1rpx;
	background-color: rgb(0, 211, 109);
	margin-top: 30rpx;
}

.login {
	background-color: rgb(0, 211, 109);
	color: white;
	width: 100%;
	height: 100rpx;
	margin-top: 100rpx;
	text-align: center;
	line-height: 100rpx;
	border-radius: 15rpx;
	font-size: 23px;
	font-weight: bolder;
}

.bottom {
	margin-top: 60rpx;
	text-align: center;
}
</style>